<!--
 * 公告通知管理
 *
 * @Author: 
 * @Date: 
-->
<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <i class="iconfont icon-notice-menu" style="margin: 5px; font-size: 22px">
                    公告通知管理
                </i>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card>
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-input
                        placeholder="请输入公告标题"
                        v-model="queryInfo.title"
                        clearable
                    ></el-input>
                </el-col>
                <el-col :span="3">
                    <el-button
                        size="small"
                        type="success"
                        icon="iconfont icon-search-menu"
                        style="font-size: 18px"
                        @click="getList"
                    >
                        搜索
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button
                        size="small"
                        type="primary"
                        icon="iconfont icon-add-button"
                        style="font-size: 18px"
                        @click="addNotice"
                    >
                        新增
                    </el-button>
                </el-col>
            </el-row>

            <el-table v-loading="loading" :data="notices" border stripe>
                <el-table-column
                    width="50"
                    label="序号"
                    align="center"
                    type="index"
                ></el-table-column>
                <el-table-column label="公告标题" prop="title" align="center">
                </el-table-column>
                <el-table-column label="公告内容" prop="content" align="center">
                    <template slot-scope="scope">
                        <span v-html="scope.row.content"></span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime" align="center">
                    <template slot-scope="scope">
                        {{ dateFormat(scope.row.createTime, 3) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作人" prop="operator" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.operator }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button
                            @click="toEdit(scope.row)"
                            type="primary"
                            circle
                        >
                            <i class="iconfont icon-edit-button" style="font-size: 22px"></i>
                        </el-button>
                        <el-button
                            @click="noticeDelete(scope.row.id)"
                            type="danger"
                            circle
                        >
                            <i class="iconfont icon-del-button" style="font-size: 22px"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </el-card>

        <el-dialog
            :title="dialogTitle"
            :visible.sync="noticeShow"
            width="500px"
            center
            @close="noticeClose"
        >
            <!-- 内容主题区域 -->
            <el-form
                :model="noticeForm"
                :rules="noticeRules"
                ref="noticeForm"
                label-width="80px"
            >
                <el-form-item label="公告标题" prop="title" class="is-required">
                    <el-input
                        v-model="noticeForm.title"
                        style="width: 300px"
                    ></el-input>
                </el-form-item>
                <el-form-item label="公告内容" prop="content" class="is-required">
                    <el-input
                        type="textarea"
                        :rows="5"
                        v-model="noticeForm.content"
                        style="width: 300px"
                    ></el-input>
                </el-form-item>
            </el-form>

            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="noticeClose()">取 消</el-button>
                <el-button type="primary" @click="noticeCommit('noticeForm')"
                    icon="iconfont icon-r-yes"> 确认提交</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>
<script>
import axios from "axios";
export default {
    data() {
        return {
            total: 0,
            loading: true,
            dialogTitle: '',
            isEdit: false,
            queryInfo: {
                title: "",
                pagenum: 1,
                pageSize: 6,
            },
            notices: [],
            noticeShow: false,
            noticeForm: {
                id: '',
                title: '',
                content: ''
            },
            noticeRules: {
                title: [
                    { required: true, message: "请输入公告标题", trigger: "blur" }
                ],
                content: [
                    { required: true, message: "请输入公告内容", trigger: "blur" }
                ],
            }
        };
    },
    methods: {
        getList() {
            axios.post("/api/notice/pageNotice", this.queryInfo).then((res) => {
                this.loading = false;
                this.total = res.data.data.total;
                this.notices = res.data.data.records;
            });
        },
        handleSizeChange(newSize) {
            this.queryInfo.pageSize = newSize;
            this.getList();
        },
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage;
            this.getList();
        },
        addNotice() {
            this.isEdit = false;
            this.dialogTitle = '新增公告';
            this.noticeShow = true;
        },
        toEdit(notice) {
            this.isEdit = true;
            this.dialogTitle = '编辑公告';
            this.noticeForm.id = notice.id;
            this.noticeForm.title = notice.title;
            this.noticeForm.content = notice.content;
            this.noticeShow = true;
        },
        noticeClose() {
            this.noticeShow = false;
            this.$nextTick(() => {
                this.$refs.noticeForm.resetFields();
                this.noticeForm = {
                    id: '',
                    title: '',
                    content: ''
                };
            });
        },
        noticeCommit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url = this.isEdit ? "/api/notice/update" : "/api/notice/save";
                    axios.post(url, this.noticeForm).then((res) => {
                        if (res.data.flag) {
                            this.$message.success(this.isEdit ? "修改成功！" : "新增成功！");
                            this.getList();
                        } else {
                            this.$message.error(this.isEdit ? "修改失败！" : "新增失败！");
                        }
                        this.noticeShow = false;
                    });
                } else {
                    return false;
                }
            });
        },
        async noticeDelete(id) {
            const re = await this.$confirm(
                "此操作将永久删除该公告, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            ).catch((err) => err);
            
            if (re != "confirm") {
                this.$message.info("已取消删除！");
            } else {
                axios.get("/api/notice/del?id=" + id).then((res) => {
                    if (res.data.data) {
                        this.$message.success("删除成功！");
                        this.getList();
                    } else {
                        this.$message.error("删除失败！");
                    }
                });
            }
        },
        //时间转换函数
        dateFormat(val, timeType) {
            //将字符串或长整型转为时间类型
            let date = new Date(val);
            //默认格式为'年月日 时:分:秒'
            let resultFormat = "Y年M月D日 h:m:s";
            switch (timeType) {
                case 1:
                    resultFormat = "Y年M月D日";
                    break;
                case 2:
                    resultFormat = "Y-M-D";
                    break;
                case 3:
                    resultFormat = "Y-M-D h:m:s";
                    break;
            }
            let result = formatTime(resultFormat);

            // 格式化日期，如月、日、时、分、秒保证为2位数
            function formatNumber(n) {
                n = n.toString();
                return n[1] ? n : "0" + n;
            }
            // 参数number为毫秒时间戳，format为需要转换成的日期格式
            function formatTime(format) {
                let newArr = [];
                let formatArr = ["Y", "M", "D", "h", "m", "s"];
                newArr.push(date.getFullYear());
                newArr.push(formatNumber(date.getMonth() + 1));
                newArr.push(formatNumber(date.getDate()));

                newArr.push(formatNumber(date.getHours()));
                newArr.push(formatNumber(date.getMinutes()));
                newArr.push(formatNumber(date.getSeconds()));

                for (let i in newArr) {
                    format = format.replace(formatArr[i], newArr[i]);
                }
                return format;
            }

            return result;
        },
    },
    mounted() {
        this.getList();
    },
};
</script>